<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>


	<title>首页</title>

	<!-- Required meta tags always come first -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">

	<!-- Main Font -->
    <script src="front/js/libs/webfontloader.min.js"></script>

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap-reboot.css">
	<link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap-grid.css">

	<!-- Main Styles CSS -->
	<link rel="stylesheet" type="text/css" href="front/css/main.css">
	<link rel="stylesheet" type="text/css" href="background/font-awesome/css/font-awesome.min.css">

	<!--文章标签云-->
	<style>
		.tag-cloud {
			font-size: 10px;
			display: inline-block;
			color: #515365;
			background: #e6ecf5;
			border-radius: 5px;
			padding: 5px;
			margin: 1px;
		}

		.like-active {
			background-color: #ff5e3a !important;
		}

		.like-active-icon {
			fill: #ff5e3a;
		}

		.bigimg {
			width: 600px;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			display: none;
			z-index: 9999;
			border: 10px solid #fff;
		}
		.line-limit-length {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
		.mask {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-color: #000;
			opacity: 0.5;
			filter: Alpha(opacity=50);
			z-index: 98;
			transition: all 1s;
			display: none
		}

		@font-face {
			font-family: "iconfont"; /* Project id 2547082 */
			src: url('//at.alicdn.com/t/font_2547082_q7bpufme7u9.woff2?t=1620909483500') format('woff2'),
			url('//at.alicdn.com/t/font_2547082_q7bpufme7u9.woff?t=1620909483500') format('woff'),
			url('//at.alicdn.com/t/font_2547082_q7bpufme7u9.ttf?t=1620909483500') format('truetype');
		}

		.iconfont {
			font-family: "iconfont" !important;
			font-size: 16px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		.icon-qq:before {
			content: "\e604";
		}

	</style>
</head>
<body>



<div class="header-spacer-small"></div>
<!-- Top Header-Profile -->

<div class="container">
	<div class="row">
		<div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
			<div class="ui-block">
				<div class="top-header">
					<div class="top-header-thumb">
						<img style="width: 100%;height: 400px" th:src="${front.background}">

					</div>

					<div class="profile-section">
						<div class="row">
							<div class="col col-lg-5 col-md-5 col-sm-12 col-12">
								<ul class="profile-menu">
									<li>
										<form action="search" method="get" onsubmit="return checkSearch()">
											<from class="w-search">
												<div class="form-group with-button">
													<input id="search" autocomplete="off" class="form-control" name="msg" onkeyup="this.value=this.value.trim()" type="text" placeholder="输入关键词进行站内搜索">
													<button>
														<svg class="olymp-magnifying-glass-icon">
															<use xlink:href="front/svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"></use></svg>
													</button>
												</div>
											</from>
										</form>
									</li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
							</div>
							<div class="col col-lg-5 ml-auto col-md-5 col-sm-12 col-12">
								<ul class="profile-menu">
									<li></li>
									<li >
										<a th:href="@{/login}" target="_blank">后台管理</a>
									</li>
								</ul>
							</div>
						</div>

						<div class="control-block-button">

							<div class="btn btn-control bg-primary more">
								<img src="https://gitee.com/cn_moti/moti-img/raw/master/2020-10-06/57d8d5912f734ee7b7b5d967140add3f.png" class="author-thumb" alt="">
								<ul class="more-dropdown more-with-triangle triangle-bottom-right">
									<li>
										<a href="#">QQ：[[${user.qq}]]</a>
									</li>
								</ul>
							</div>
							<div class="btn btn-control bg-purple more">
								<img src="https://gitee.com/cn_moti/moti-img/raw/master/2020-10-06/0a6296556d5c41788eddb1f44b9f6824.png" class="author-thumb" alt="">
								<ul class="more-dropdown more-with-triangle triangle-bottom-right">
									<li>
										<a href="#">微信</a>
									</li>
									<li>
										<img style="width: 150px;height: 150px" th:src="${user.wechat}" alt="">
									</li>
								</ul>
							</div>

						</div>
					</div>
					<div class="top-header-author">
						<a href="" class="author-thumb">
							<img th:src="${user.img}" width="100%" alt="author">
						</a>
						<div class="author-content">
							<a th:href="@{/}" class="h4 author-name" th:text="${front.title}"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- ... end Top Header-Profile -->
<div class="container">
	<div class="row">

		<!-- Main Content -->

		<div class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">

			<div id="newsfeed-items-grid" th:each="article:${articles}">

				<div class="ui-block">
					<!-- Post -->

					<article class="hentry post">

						<div class="post__author author vcard inline-items">
							<div class="author-date">
								<a class="h4 post__author-name fn" th:href="@{/article(articleId=${article.getId()})}">[[${article.title}]]</a>
								<div class="post__date">
									<time class="published" datetime="2017-03-24T18:18" th:text="${#dates.format(article.publishTime,'yyyy年MM月dd日')}">
									</time>
									<a th:href="@{/search(kindId=${article.getKindId()})}" style="margin: 0px 4px 2px 0px" class="post-category bg-breez-light" ><i class="fa fa-folder"></i>[[${article.kind.name}]] </a>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-4">
								<img th:src="${article.img}" style="width: 220px;height: auto">
							</div>
							<div class="col-8">
								<p>摘要：[[${article.introduce}]]...》<a style="color: cornflowerblue" th:href="@{/article(articleId=${article.getId()})}">阅读原文</a></p>
							</div>
						</div>



						<div class="post-additional-info inline-items">

								<a th:href="@{/search(tagId=${tag.getId()})}" style="margin: 0px 4px 2px 0px" class="post-category bg-blue-light" th:each="tag:${article.tags}">
									<i class="fa fa-tag"></i>
									[[${tag.name}]]</a>


							<div class="comments-shared">
								<a href="#" class="post-add-icon inline-items">
									<svg class="olymp-speech-balloon-icon">
										<use xlink:href="svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use>
									</svg>
									<span th:if="${article.comment!=null}">评论：[[${article.comment}]]</span>
									<span th:if="${article.comment==null}">评论：0</span>

								</a>
								<a href="#" class="post-add-icon inline-items">
									<svg class="olymp-share-icon">
										<use xlink:href="svg-icons/sprites/icons.svg#olymp-share-icon"></use>
									</svg>
									<span>阅读:[[${article.readCount}]]</span>
								</a>
							</div>


						</div>



					</article>

					<!-- .. end Post -->				</div>

			</div>
			<nav aria-label="Page navigation">
				<ul class="pagination justify-content-center">
					<li class="page-item" th:if="${page != 1}">
						<a class="page-link" href="index?page=1" tabindex="-1">第一页</a>
					</li>
					<li class="page-item"><a class="page-link" th:href="@{index(page=${page -1})}" th:if="${page > 2}">[[${page-1}]]</a></li>
					<li class="page-item active"><a class="page-link" href="javaScript:Void(0)">[[${page}]]</a></li>
					<li class="page-item"><a class="page-link" th:href="@{index(page=${page +1})}" th:if="${page < (totalPage -1)}">[[${page + 1}]]</a></li>

					<li class="page-item" th:if="${page != totalPage}">
						<a class="page-link" th:href="@{index(page=${totalPage})}">最后一页</a>
					</li>
					<li class="page-item disabled">
						<a class="page-link" href="#" tabindex="-1">共：[[${totalPage}]]页</a>
					</li>
				</ul>
			</nav>
		</div>

		<!-- ... end Main Content -->


		<!-- Left Sidebar -->

		<div class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">

			<!--作者信息-->
			<div class="ui-block">
				<div class="ui-block-title">
					<h6 class="title">个人名片</h6>
				</div>
				<div class="ui-block-content">

					<!-- W-Personal-Info -->

					<ul class="widget w-personal-info item-block">
						<li>
							<span class="h6 title">基本信息:</span>
							<span class="text">昵称：[[${user.name}]]</span>
							<span class="text">性别：[[${user.sex}]]</span>
							<span class="text">年龄：[[${#dates.year(#dates.createNow()) - #dates.year(user.birthday)}]]</span>
							<span class="text">生日：[[${#dates.format(user.birthday,'MM-dd')}]]</span>
							<span th:if="${user.address.trim() != ''}" class="text">地区：[[${user.address}]]</span>
							<span th:if="${user.info.trim() != ''}" class="text">职业：[[${user.career}]]</span>
						</li>
						<li>
							<span class="h6 title">个人说明:</span>
							<span class="text">[[${user.info}]]</span>
						</li>

					</ul>

					<div class="widget w-socials">
						<h6 class="title">联系方式:</h6>
						<span th:if="${user.qq.trim() != ''}" class="social-item bg-facebook">
							<i class="iconfont icon-qq" aria-hidden="true"></i>
							[[${user.qq}]]
						</span>
						<span th:if="${user.phone.trim() != ''}" class="social-item bg-twitter">
							<i class="fa fa-phone" aria-hidden="true"></i>
							[[${user.phone}]]
						</span>
						<span th:if="${user.email.trim() != ''}" class="social-item bg-dribbble">
							<i class="fa fa-envelope" aria-hidden="true"></i>
							[[${user.email}]]
						</span>
					</div>


					<!-- ... end W-Socials -->
				</div>
			</div>


			<!--热门文章-->
			<div class="ui-block">
				<div class="ui-block-title">
					<h6 class="title">热门文章</h6>
				</div>
				<div class="ui-block-content">

					<!-- W-Personal-Info -->

					<ul class="widget w-personal-info item-block">
						<li th:each="article:${famousArticles}" style="margin-top: -20px">
							<a th:href="@{article(articleId=${article.id})}" style="font-weight: 300" class="h6" th:text="${'《'+article.title + '》-' + article.readCount + '次阅读'}"></a>
						</li>
					</ul>
				</div>
			</div>

           <!--友情链接-->
			<div class="ui-block">
				<div class="ui-block-title">
					<h6 class="title">友情链接</h6>
				</div>

				<!-- W-Friend-Pages-Added -->

				<ul class="widget w-friend-pages-added notification-list friend-requests">
					<li class="inline-items" th:each="link:${links}">
						<div class="author-thumb">
							<img th:src="${link.img}"style="width: 26px;height: 26px" alt="author">
						</div>
						<div class="notification-event">
							<a th:href="${link.getUrl()}" class="h6 notification-friend">[[${link.name}]]</a>
						</div>
<!--						<span class="notification-icon" data-toggle="tooltip" data-placement="top" data-original-title="ADD TO YOUR FAVS">-->
<!--							<a href="#">-->
<!--								<svg class="olymp-star-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use></svg>-->
<!--							</a>-->
<!--						</span>-->
					</li>
				</ul>

				<!-- .. end W-Friend-Pages-Added -->
			</div>




		</div>

		<!-- ... end Left Sidebar -->

		<!-- Right Sidebar -->

		<div class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-6 col-12">

			<!--公告-->
			<div class="ui-block">
				<div class="ui-block-title">
					<h6 class="title">公告</h6>
				</div>
				<div class="ui-block-content">
					<div class="text" style="text-indent: 1em;font-size: 14px;white-space: pre-line;" >
                      [[${front.notice}]]
					</div>
					<hr>
					<div><a th:if="${front.noticeImg != null}" ><img style="width: 100%" th:src="${front.noticeImg}" alt=""></a></div>

				</div>
					<hr>
			</div>

			<!--标签云-->
			<div class="ui-block">
				<div class="ui-block-title">
					<h6 class="title">标签云</h6>
				</div>
				<div class="ui-block-content">
					<a th:if="${tag.articleCount >=9}" th:each="tag:${tags}"
					   th:text="${tag.name + '('+tag.articleCount+')'}"
					   style="font-size: 20px"
					   class="tag-cloud" th:href="@{search(tagId=${tag.id})}"></a>
					<a th:if="${tag.articleCount >= 6 and tag.articleCount < 9}" th:each="tag:${tags}"
					   th:text="${tag.name + '('+tag.articleCount+')'}"
					   style="font-size: 18px"
					   class="tag-cloud" th:href="@{search(tagId=${tag.id})}"></a>
					<a th:if="${tag.articleCount >= 3 and tag.articleCount < 6}" th:each="tag:${tags}"
					   th:text="${tag.name + '('+tag.articleCount+')'}"
					   style="font-size: 14px"
					   class="tag-cloud" th:href="@{search(tagId=${tag.id})}"></a>
					<a th:if="${tag.articleCount > 0 and tag.articleCount < 3}" th:each="tag:${tags}"
					   th:text="${tag.name + '('+tag.articleCount+')'}"
					   style="font-size: 10px"
					   class="tag-cloud" th:href="@{search(tagId=${tag.id})}"></a>
				</div>
			</div>
			<!--分类-->
			<div class="ui-block">
				<div class="ui-block-title">
					<h6 class="title">分类</h6>
				</div>
				<div class="ui-block-content">
					<ul class="widget w-personal-info item-block">
						<li th:each="kind:${kinds}" style="margin-top: -20px;padding: 15px 10px;">
							<a th:href="@{search(kindId=${kind.getId()})}" style="font-weight: 300" class="h6"
							   th:text="${kind.getName()}"></a>
							<span class="float-right" th:text="${kind.getArticleCount() + '篇'}"></span>
						</li>
					</ul>
				</div>
			</div>
			<!--文章归档-->
			<div class="ui-block">
				<div class="ui-block-title">
					<h6 class="title">文章归档</h6>
				</div>
				<div class="ui-block-content">
					<ul class="widget w-personal-info item-block">
						<li th:each="archive:${archives}" style="margin-top: -20px;padding: 15px 10px;">
							<a th:href="@{search(date=${archive.date})}" style="font-weight: 300" class="h6" th:text="${archive.date}"></a>
							<span class="float-right" th:text="${archive.count + '篇'}"></span>
						</li>
					</ul>
				</div>
			</div>




		</div>

		<!-- ... end Right Sidebar -->


	</div>
</div>

<!--back to top-->
<a class="back-to-top" href="#">
	<img src="front/svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
</a>


<!-- JS Scripts -->
<script src="common/js/jquery-3.4.1.js"></script>
<script src="front/js/libs/jquery.appear.js"></script>
<script src="front/js/libs/jquery.mousewheel.js"></script>
<script src="front/js/libs/perfect-scrollbar.js"></script>
<script src="front/js/libs/jquery.matchHeight.js"></script>
<script src="front/js/libs/svgxuse.js"></script>
<script src="front/js/libs/imagesloaded.pkgd.js"></script>
<script src="front/js/libs/Headroom.js"></script>
<script src="front/js/libs/velocity.js"></script>
<script src="front/js/libs/ScrollMagic.js"></script>
<script src="front/js/libs/jquery.waypoints.js"></script>
<script src="front/js/libs/jquery.countTo.js"></script>
<script src="front/js/libs/material.min.js"></script>
<script src="front/js/libs/bootstrap-select.js"></script>
<script src="front/js/libs/smooth-scroll.js"></script>
<script src="front/js/libs/selectize.js"></script>
<script src="front/js/libs/moment.js"></script>
<script src="front/js/libs/daterangepicker.js"></script>
<script src="front/js/libs/fullcalendar.js"></script>
<script src="front/js/libs/isotope.pkgd.js"></script>
<script src="front/js/libs/ajax-pagination.js"></script>
<script src="front/js/libs/Chart.js"></script>
<script src="front/js/libs/chartjs-plugin-deferred.js"></script>
<script src="front/js/libs/circle-progress.js"></script>
<script src="front/js/libs/loader.js"></script>
<script src="front/js/libs/run-chart.js"></script>
<script src="front/js/libs/jquery.magnific-popup.js"></script>
<script src="front/js/libs/jquery.gifplayer.js"></script>
<script src="front/js/libs/ion.rangeSlider.js"></script>

<script src="front/js/main.js"></script>
<script src="front/js/libs-init/libs-init.js"></script>
<script defer src="front/fonts/fontawesome-all.js"></script>
<script src="common/js/sweetalert.min.js"></script>


<script src="front/Bootstrap/dist/js/bootstrap.bundle.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=a732d71d8cacb92702aa8ea4203e353c&plugin=AMap.CitySearch">
</script>
<script>

	function checkSearch() {
		let search = $('#search').val().trim();
		if (search == ''){
			return false;
		}
		return true;
	}

	/**
	 * 天气
	 */
	var code;

	function showCityInfo() {
		//实例化城市查询类
		var citysearch = new AMap.CitySearch();
		//自动获取用户IP，返回当前城市
		citysearch.getLocalCity(function (status, result) {
			if (status === 'complete' && result.info === 'OK') {
				if (result && result.city && result.bounds) {
					var adcode = result.adcode;
					code = adcode;
				}
			} else {
				//天气查询失败
			}
		});
	}

	showCityInfo();

	function judgeImg(status, imgId) {
		if ((status.search('晴') != -1)) {
			$(imgId).html('<use xlink:href=\"front/svg-icons/sprites/icons-weather.svg#olymp-weather-sunny-icon\"></use>');
		} else if (status.search('云') != -1) {
			$(imgId).html('<use xlink:href=\"front/svg-icons/sprites/icons-weather.svg#olymp-weather-partly-sunny-icon\"></use>');
		} else if (status.search('雨') != -1) {
			$(imgId).html('<use xlink:href=\"front/svg-icons/sprites/icons-weather.svg#olymp-weather-rain-icon\"></use>');
		} else if (status.search('阴') != -1) {
			$(imgId).html('<use xlink:href=\"front/svg-icons/sprites/icons-weather.svg#olymp-weather-cloudy-icon\"></use>');
		}
	}

	$.ajax({
		type: 'GET',
		url: 'https://tianqiapi.com/api',
		data: 'version=v1&cityid=' + code + '&appid=26161536&appsecret=2LkFkDWJ',
		dataType: 'JSON',
		error: function () {
			alert('网络错误');
		},
		success: function (res) {
			$('#min_tem').html(res.data[0].tem2);
			$('#max_tem').html(res.data[0].tem1);
			$('#tody_main').html(parseInt(res.data[0].tem2) + (parseInt(res.data[0].tem1) - parseInt(res.data[0].tem2)) / 2);
			$(".climate").html(res.data[0].wea);
			$("#air_level").html(res.data[0].air_level);
			$("#humidity").html(res.data[0].humidity);
			judgeImg(res.data[0].wea, "#today");
			$("#week").html(res.data[0].week);
			$("#date_1").html(res.data[0].date);
			$(".place").html(res.city);
			for (var i = 1; i < res.data.length; i++) {
				var temp_day = "#day_" + i + "";
				var temp_day_tem = "#day_tem" + i + "";
				var day_img = "#day_img" + i + "";
				$(temp_day).html(res.data[i].week);
				$(temp_day_tem).html(res.data[i].tem);
				judgeImg(res.data[i].wea, day_img);

			}
		}
	});
</script>
</body>
</html>